import type { Metadata } from 'next';
import { ScrollX } from '@/components/models/scroll-x';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import type { ScatterPoint } from '@/components/charts';
import { ParetoChart } from '@/components/benchmarks/client-charts';
import { TrustBadge } from '@/components/models/badges';
import { configChipsOf, fmtScoreUnit, opennessLabel, xFormatter } from '@/components/models/shared';
import { Estimated } from '@/components/ui/badges';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { ApiError, apiD1, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { ParetoPayload } from '@/lib/types';

/*
  Cost vs performance for one benchmark (Pareto view from `/pareto`): X = cheapest current output price (log toggle) or another axis,
  Y = score in the comparability group, bubble = context or parameters (joined from a second /pareto call), frontier from the API.
*/

type SP = Record<string, string | undefined>;
type Params = { params: Promise<{ slug: string }>; searchParams: Promise<SP> };
export const revalidate = 600;
const X_AXES = [
  { key: 'output_price', label: 'Output price' },
  { key: 'input_price', label: 'Input price' },
  { key: 'parameter_count', label: 'Parameters' },
  { key: 'context_length', label: 'Context' },
  { key: 'memory_estimate', label: 'Memory (est.)' },
];

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const d = await safe(apiD1.benchmark(slug));
  if (!d || d.entity_type !== 'benchmark') return { title: 'Cost vs performance', robots: { index: false } };
  const title = `${d.name} — Cost vs Performance (Pareto)`;
  const description = `Every canonical model with a current ${d.name} result plotted against its cheapest current output price (USD per 1M tokens), with the Pareto frontier — same comparability group only, trust level on every point. ${SITE_NAME}.`;
  const canonical = `${routes.benchmark(d.slug)}/cost-vs-performance`;
  return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'article' } };
}

async function loadPareto(q: Record<string, string | number | undefined>): Promise<{ res: ParetoPayload | null; error: string | null }> {
  try {
    return { res: await apiD1.pareto(q), error: null };
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    if (e instanceof ApiError && (e.status === 400 || e.status === 422)) return { res: null, error: e.detail ?? 'Unsupported axis.' };
    return { res: null, error: null };
  }
}

export default async function CostVsPerformancePage({ params, searchParams }: Params) {
  const { slug } = await params;
  const sp = await searchParams;
  const x = X_AXES.find((a) => a.key === sp.x) ?? X_AXES[0]!;
  const log = sp.log !== '0';
  const bubble = sp.bubble === 'params' ? 'params' : sp.bubble === 'none' ? 'none' : 'context';
  const metric = sp.metric?.trim() || undefined;
  const configKey = sp.config_key?.trim() || undefined;
  const org = sp.org?.trim() || undefined;
  const openness = sp.openness?.trim() || undefined;
  const base = { benchmark: slug, metric, config_key: configKey, org, openness };
  const [detail, { res, error }, bubbleRes] = await Promise.all([safe(apiD1.benchmark(slug)), loadPareto({ ...base, x: x.key }), bubble === 'none' ? Promise.resolve(null) : safe(apiD1.pareto({ ...base, x: bubble === 'params' ? 'parameter_count' : 'context_length' }))]);
  if (!detail || detail.entity_type !== 'benchmark') notFound();
  const canonical = `${routes.benchmark(detail.slug)}/cost-vs-performance`;
  const href = (patch: SP) => {
    const p = new URLSearchParams();
    for (const [k, v] of Object.entries({ x: x.key === 'output_price' ? undefined : x.key, log: log ? undefined : '0', bubble: bubble === 'context' ? undefined : bubble, metric, config_key: configKey, org, openness, ...patch })) if (v) p.set(k, v);
    const s = p.toString();
    return `${canonical}${s ? `?${s}` : ''}`;
  };
  const unit = typeof detail.attributes?.unit === 'string' ? (detail.attributes.unit as string) : null;
  const bubbleById = new Map<string, number>();
  for (const p of bubbleRes?.points ?? []) bubbleById.set(p.model.id, p.x);
  const frontierSet = new Set(res?.frontier ?? []);
  const points: ScatterPoint[] = (res?.points ?? []).map((p) => {
    const chips = configChipsOf(p.config, res?.group?.config ?? null, 3);
    return {
      id: p.id,
      x: p.x,
      y: p.y,
      r: bubble === 'none' ? 1 : bubbleById.get(p.model.id) ?? 1,
      label: p.model.name,
      sub: [p.model.organization, p.provider?.name ? `via ${p.provider.name}` : null, `rank ${p.rank}`, p.trust_level, chips.map((c) => `${c.key}=${c.value}`).join(' ') || null, p.estimated ? 'estimated' : null].filter(Boolean).join(' · '),
      href: `/models/${encodeURIComponent(p.model.slug)}`,
      color: p.model.openness && /open|restricted/.test(p.model.openness) ? 'var(--positive)' : 'var(--type-model)',
      group: p.model.openness ?? undefined,
    };
  });
  const frontierPts = points.filter((p) => frontierSet.has(p.id)).sort((a, b) => a.x - b.x);
  const hib = res?.group?.higher_is_better !== false;
  const yFmt = (v: number) => fmtScoreUnit(v, unit);
  const xFmt = xFormatter(x.key);
  const chip = (on: boolean) => cn('inline-flex h-8 items-center border px-2.5 text-xs whitespace-nowrap', on ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink');
  const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: `${detail.name} — cost vs performance`, url: `${SITE_URL}${canonical}`, description: res?.methodology };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <PageHeader
        eyebrow={
          <>
            <Link href={routes.benchmarks()} className="hover:text-ink">
              Benchmarks
            </Link>
            <span aria-hidden>/</span>
            <Link href={routes.benchmark(detail.slug)} className="hover:text-ink">
              {detail.name}
            </Link>
          </>
        }
        title={`${detail.name} — cost vs performance`}
        lede={res?.group ? `Best current row per canonical model in the group “${res.group.label}” (${fmtInt(res.group.model_count)} models) against ${res.x.label}. The dashed line is the Pareto frontier: no model is both better and cheaper than a point on it.` : 'Best current row per canonical model against its cheapest current price.'}
        aside={
          <Link href={routes.benchmark(detail.slug)} className="inline-flex h-9 items-center border border-rule px-2.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
            ← Leaderboard
          </Link>
        }
      >
        <div className="mt-5 flex flex-wrap items-center gap-x-6 gap-y-2 text-xs" data-pareto-controls>
          <span className="flex flex-wrap items-center gap-1.5">
            <span className="eyebrow mr-1">X</span>
            {X_AXES.map((a) => (
              <Link key={a.key} href={href({ x: a.key === 'output_price' ? undefined : a.key })} className={chip(a.key === x.key)} aria-current={a.key === x.key ? 'true' : undefined}>
                {a.label}
              </Link>
            ))}
          </span>
          <span className="flex items-center gap-1.5">
            <span className="eyebrow mr-1">Scale</span>
            <Link href={href({ log: undefined })} className={chip(log)} aria-pressed={log}>
              log
            </Link>
            <Link href={href({ log: '0' })} className={chip(!log)} aria-pressed={!log}>
              linear
            </Link>
          </span>
          <span className="flex items-center gap-1.5">
            <span className="eyebrow mr-1">Bubble</span>
            <Link href={href({ bubble: undefined })} className={chip(bubble === 'context')}>
              context
            </Link>
            <Link href={href({ bubble: 'params' })} className={chip(bubble === 'params')}>
              params
            </Link>
            <Link href={href({ bubble: 'none' })} className={chip(bubble === 'none')}>
              none
            </Link>
          </span>
          {res && res.groups.length > 1 && (
            <form action={canonical} method="get" className="flex items-center gap-1.5">
              {x.key !== 'output_price' && <input type="hidden" name="x" value={x.key} />}
              {!log && <input type="hidden" name="log" value="0" />}
              <span className="eyebrow mr-1">Group</span>
              <select name="group" defaultValue={res.group ? `${res.group.metric}|${res.group.config_key}` : ''} className="h-8 max-w-[18rem] border border-rule bg-surface px-2 text-xs text-ink" aria-label="Comparability group">
                {res.groups.map((g) => (
                  <option key={g.config_key} value={`${g.metric}|${g.config_key}`}>
                    {g.label} ({g.model_count})
                  </option>
                ))}
              </select>
              <button type="submit" className="inline-flex h-8 items-center bg-ink px-2.5 text-xs font-medium text-canvas">
                Go
              </button>
            </form>
          )}
        </div>
      </PageHeader>

      <div className="space-y-8 pb-16">
        {error ? (
          <EmptyState title="This axis is not available">{error}</EmptyState>
        ) : !res ? (
          <Unavailable what="Pareto view" />
        ) : points.length === 0 ? (
          <EmptyState title="No model has both a score in this group and a value on this axis">Try another axis or comparability group.</EmptyState>
        ) : (
          <>
            <section data-pareto-chart>
              <ParetoChart points={points} xKey={x.key} unit={unit} log={log} xLabel={res.x.label} yLabel={res.y.label} frontier={frontierPts.map((p) => ({ x: p.x, y: p.y }))} highlight={[...frontierSet]} />
              <p className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-ink-3">
                <span className="inline-flex items-center gap-1">
                  <span className="inline-block size-2 rounded-full" style={{ background: 'var(--positive)' }} /> open / restricted weights
                </span>
                <span className="inline-flex items-center gap-1">
                  <span className="inline-block size-2 rounded-full" style={{ background: 'var(--type-model)' }} /> closed
                </span>
                <span className="inline-flex items-center gap-1">
                  <span className="inline-block h-[2px] w-4 border-t border-dashed border-accent-2" /> Pareto frontier ({fmtInt(frontierPts.length)} models)
                </span>
                {bubble !== 'none' && <span>bubble = {bubble === 'params' ? 'total parameters' : 'context window'}{bubbleRes ? '' : ' (unavailable — uniform)'}</span>}
                {x.key === 'memory_estimate' && <Estimated />}
              </p>
            </section>
            <section>
              <p className="eyebrow mb-2">
                Frontier models <span className="tnum text-ink-3">{fmtInt(frontierPts.length)}</span>
              </p>
              <ScrollX><DataTable caption="Pareto frontier" compact>
                <thead>
                  <tr>
                    <Th>Model</Th>
                    <Th num>{res.y.label}</Th>
                    <Th num>Rank</Th>
                    <Th num>{res.x.label}</Th>
                    <Th>Provider</Th>
                    <Th>Trust</Th>
                  </tr>
                </thead>
                <tbody>
                  {(hib ? [...frontierPts].sort((a, b) => b.y - a.y) : [...frontierPts].sort((a, b) => a.y - b.y)).map((p) => {
                    const raw = res.points.find((q) => q.id === p.id)!;
                    return (
                      <tr key={p.id}>
                        <Td primary>
                          <Link href={p.href ?? '#'} className="text-ink hover:text-accent hover:underline">
                            {p.label}
                          </Link>
                          <span className="block text-[11px] text-ink-3">
                            {raw.model.organization ?? ''}
                            {raw.model.openness ? ` · ${opennessLabel(raw.model.openness)}` : ''}
                          </span>
                        </Td>
                        <Td num label={res.y.label} className="tnum font-medium">
                          {yFmt(p.y)}
                        </Td>
                        <Td num label="Rank" className="tnum text-ink-2">
                          {fmtInt(raw.rank)}
                        </Td>
                        <Td num label={res.x.label} className="tnum text-accent-2">
                          {xFmt(p.x)}
                          {raw.estimated && <span className="ml-1 text-[10px] uppercase text-warning">est.</span>}
                        </Td>
                        <Td label="Provider" className="text-ink-2">
                          {raw.provider ? <Link href={routes.entity(raw.provider)} className="hover:text-accent">{raw.provider.name}</Link> : '—'}
                        </Td>
                        <Td label="Trust">
                          <TrustBadge level={raw.trust_level} />
                        </Td>
                      </tr>
                    );
                  })}
                </tbody>
              </DataTable></ScrollX>
            </section>
            <Note>
              <strong className="font-medium text-ink-2">Methodology.</strong> {res.methodology} Only the selected comparability group is plotted; points under other configurations are not mixed in. Price = cheapest current offer across providers at the time of the last crawl. Nothing is estimated except where marked.
            </Note>
          </>
        )}
      </div>
    </Container>
  );
}